<template>
  <div class="app-container">


    <!-- vxe检索数据组件 -->
    <search-form
      ref="searchForm"
      :formSearchData.sync="formSearchData"
      @searchEventEmit="searchEventEmit"
      @resetSearchEventEmit="resetSearchEventEmit"
    >
    </search-form>


    <!-- 表格组件 -->
    <ex-base-table
      ref="exBaseTable"
      :tableColumn="tableColumn"
      :tableData="tableData"
      :loading.sync="loading"
      @handleRemoveEmit="handleRemoveEmit"
      @handleCreateEmit="handleCreateEmit"
      @handleUpdateEmit="handleUpdateEmit"
      @handleRmoveColEmit="handleRmoveColEmit"
    >
      <!-- 曲线图插槽 -->
      <template v-slot:viewChart="{row}">
        &nbsp;
        <el-button v-if="true" size="mini" type="text" @click="viewChart(row)">
          曲线图2
        </el-button>
      </template>

      <!-- 状态切换按钮插槽 -->
      <!-- <template v-slot:statusBtnGroup="{row}">
        <vxe-table-column field="status" title="状态" width="100">
          <template #default="{ row }">
            <el-switch v-model="row.status"></el-switch>
          </template>
        </vxe-table-column>
      </template> -->


    </ex-base-table>

    <!-- 分页组件 -->
    <pagination
      v-show="tablePage.totalResult>0"
      :total="tablePage.totalResult"
      :page.sync="tablePage.currentPage"
      :limit.sync="tablePage.pageSize"
      @pagination="pageFindList"
    />


    <!-- 表单提价组件 -->
    <submit-form
      ref="submitForm"
      :dialogFormVisible.sync="dialogFormVisible"
      :dialogStatus="dialogStatus"
      :formSubmitData="formSubmitData"
      @handleFromUpdateDataEmit="handleFromUpdateDataEmit"
      @handleFromCreateDataEmit="handleFromCreateDataEmit"
    >
    </submit-form>


    <!-- 曲线图 -->

    <!-- 新增&修改表单 -->
    <el-dialog :title="chartTitle" :visible.sync="DialogChartVisible">
      <ExBaseChart
        :chart-data="lineChartData"
      />
    </el-dialog>

  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'

import {fetchList, fetchPv, createArticle, updateArticle} from '@/api/article2'
// 基础表格组件
import ExBaseTable from '@/components/VxeTable/ExBaseTable'
// 分页
import Pagination from '@/components/Pagination'
// 文章表单
import SubmitForm from './components/SubmitForm'
// 检索表单
import SearchForm from './components/SearchForm'

// 基础折线图图表
import ExBaseChart from '@/components/Echarts/LineChart/ExBaseChart'

import resetFormSubmitData from '@/views/mixins/resetFormSubmitData'

export default {
  name: 'vxe-basetable',
  mixins:[resetFormSubmitData],
  components: {
    //PageHeaderLayout,
    ExBaseTable,
    Pagination,
    SubmitForm,
    SearchForm,
    ExBaseChart
  },
  // 定义属性
  data() {
    return {
      // 检索条件
      formSearchData: {
        name: '',
        searchDate: '',
      },
      statusBtnVal: 'published', //状态切换按钮

      /* 图标相关 */
      chartTitle: '',  //图标标题
      DialogChartVisible: false,  //图标dialog
      lineChartData: {
        xAxisData: ['100', '120', '161', '134', '105', '160', '165'],
        seriesData: [120, 82, 91, 154, 162, 140, 145]
      },


      // 测试功能-下拉实现分页表格
      value4: '',
      tableColumn4: [
        {type: 'checkbox'},
        {field: 'name', title: 'Name'},
        {field: 'role', title: 'Role'},
        {field: 'sex', title: 'Sex'},
        {field: 'sex2', title: 'Sex'},
        {field: 'sex3', title: 'Sex'},
        {field: 'sex4', title: 'Sex'},
      ],
      loading4: false,
      tableData4: [],
      tableList4: [
        {name: 'Test1', role: '前端', sex: '男'},
        {name: 'Test2', role: '后端', sex: '男'},
        {name: 'Test3', role: '测试', sex: '男'},
        {name: 'Test4', role: '设计师', sex: '女'},
        {name: 'Test5', role: '前端', sex: '男'},
        {name: 'Test6', role: '前端', sex: '男'},
        {name: 'Test7', role: '前端', sex: '男'}
      ],
      tablePage4: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      /* 表单相关 */
      dialogFormVisible: false, // 修改删除弹出框
      dialogStatus: '',
      // 表单数据对象
      formSubmitData: {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        type: '',
        status: 'published',
      },
       // 表单数据对象
      initFormSubmitData: {
        id: undefined,
        importance: '',
        remark: '',
        timestamp: new Date(),
        title: '',
        type: '',
        status: 'published',
      },
      /* 分页相关 */
      tablePage: {
        currentPage: 1, //当前页
        pageSize: 10,  // 每一页页数
        totalResult: 0
      },
      /* 表格相关 */
      tableColumn: [], // 表格字段
      loading: false, //表格loading特效
      tableData: [],  //表格数据
    } //datareturn-end

  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {


    // 测试功能-下拉实现分页表格
    focusEvent4() {
      this.$refs.xDown4.showPanel()
    },
    keyupEvent4() {
      const {value4} = this
      this.loading4 = true
      setTimeout(() => {
        this.loading4 = false
        if (value4) {
          this.tableData4 = this.tableList4.filter(row => row.name.indexOf(value4) > -1)
        } else {
          this.tableData4 = this.tableList4.slice(0)
        }
      }, 100)
    },
    suffixClick4() {
      this.$refs.xDown4.togglePanel()
    },
    cellClickEvent4({row}) {

      this.value4 = row.name
      // this.$refs.xDown4.hidePanel()
    },
    pageChangeEvent4({currentPage, pageSize}) {
      this.tablePage4.currentPage = currentPage
      this.tablePage4.pageSize = pageSize
    },
    checkboxClick({row}) {
      console.log('checkboxClick::', row)
    },


    /* API数据操作相关 */
    // 查询数据
    findList() {
      this.loading = true
      console.log(' this.formSearchData:::', this.formSearchData);
      console.log('打印当前页：：：：', this.tablePage.currentPage);
      // 请求表格数据
      fetchList({
        page: this.tablePage.currentPage, // 当前页
        pageSize: this.tablePage.pageSize, // 每页条数
        ...this.formSearchData  //检索条件
      }).then(({data}) => {
        console.log('response:....', data);
        // 给表格数据赋值
        this.tableData = data.data
        // 给分页总数赋值
        this.tablePage.totalResult = data.total
        // 关闭加载特效
        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      }, error => {
        console.log('getList:error', error);
        // alert(error);
      })
    },
    /* 分页组件相关 */
    // 分页事件（页码切换，每页页数切换）
    pageFindList() {
      this.findList()
    },
    /* 表格组件相关 */
    // 初始化表格字段
    initTableCols() {
      const tabCols = [  //动态增加的字段 传进来的
        // { type: 'seq', width: 60, fixed: null },
        // { type: 'checkbox', width: 50, fixed: null },
        {field: 'title', title: '标题3', width: 200, showOverflow: true, sortable: true},
        {field: 'pic_title_pc', title: 'pc封面图', width: 300},
        {field: 'created_at', title: '更新时间', width: 200},
        {field: 'updated_at', title: '修改时间', width: 200},
        {
          field: 'author', title: '作者', width: 300, formatter(obj) {
            console.log('formatterformatter', obj);
            if (obj.cellValue === 0) {
              return "admin"
            } else {
              return "无名"
            }
          }
        }
      ]
      this.tableColumn = tabCols;
    },
    // 表格工具组-多选删除
    handleRemoveEmit(selectRecords) {
      console.log("AJAX请求删除记录");
      this.$refs.exBaseTable.$refs.xTable.removeCheckboxRow()
      this.findList()
    },
    // 表格工具组-新增表单弹窗（需要表单组件）
    handleCreateEmit(type) {
      // 重置表单内容
      this.resetFormSubmitData()
      this.dialogStatus = type
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.submitForm.$refs['dataForm'].clearValidate()
      })
    },
    // 行内按钮-修改数据弹窗（需要表单组件）
    handleUpdateEmit(row, type) {
      this.temp = Object.assign({}, row) // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = type
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.submitForm.$refs['dataForm'].clearValidate()
      })
    },
    // 单行删除
    handleRmoveColEmit(row) {
      console.log("AJAX 请求删除单行数据");
      this.$refs.exBaseTable.$refs.xTable.remove(row)
    },

    /* 表单组件相关 */
    // 更新
    handleFromUpdateDataEmit() {
      console.log("this.formSubmitDatathis.formSubmitDatathis.formSubmitDatathis.formSubmitData", this.formSubmitData);
      console.log("表单组件相关:此处运行更新数据操作api等");
    },
    // 增加
    handleFromCreateDataEmit() {
      console.log("this.formSubmitDatathis.formSubmitDatathis.formSubmitDatathis.formSubmitData", this.formSubmitData);
      console.log("表单组件相关:此处运行添加数据操作api等");
    },

    /* 检索相关 */
    // 检索
    searchEventEmit() {
      this.tablePage.currentPage = 1
      console.log("searchEventEmit", this.formSearchData);
      this.findList()
    },
    // 重置
    resetSearchEventEmit() {
      // 重置代码...
      console.log("resetSearchEventEmit", this.formSearchData);
      this.tablePage.currentPage = 1
      this.findList()
    },

    /* 生成图表 */
    viewChart(row) {


      let randArr1 = ['100', '120', '161', '134', '105', '160', '165']
      let randArr2 = [120, 82, 91, 154, 162, 140, 145]
      this.lineChartData.xAxisData = this.shuffle(randArr1)
      this.lineChartData.seriesData = this.shuffle(randArr2)
      this.chartTitle = '图标标题'
      this.DialogChartVisible = true

    },
    shuffle(arr) {
      let i = arr.length;
      while (i) {
        let j = Math.floor(Math.random() * i--);
        [arr[j], arr[i]] = [arr[i], arr[j]];
      }
      return arr;
    }


  }, //method-end
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 测试功能-下拉分页表格
    // this.keyupEvent4()
    // 初始化表格字段
    this.initTableCols()
    // 初始化表格数据
    this.findList()

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>


.my-dropdown4 {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
</style>